<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>000HelloWorld</title>
    <script src="../vendor/vue1.0.26.js"></script>
</head>
<body>

<!--region hello world-->
<fieldset>
    <legend>app hello world</legend>
    <div id="app">{{message}}</div>
</fieldset>

<script>
    //hello world
    new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        }
    })
</script>
<!--endregion-->

<!--region 双向bind-->
<fieldset>
    <legend>app1 双向bind</legend>
    <div id="app1">
        <input type="text" v-model="message">
        <span>{{message}}</span>
    </div>
</fieldset>

<script>
    //双向bind
    new Vue({
        el: "#app1",
        data: {
            message: "Hello Vue!"
        }
    })
</script>
<!--endregion-->

<fieldset>
    <legend>app2 列表</legend>
    <div id="app2">
        <ul>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ul>
    </div>
</fieldset>

<script>
    //输出列表
    new Vue({
        el: "#app2",
        data: {
            todos: [{text: "learn vue"}, {text: "use vue"}]
        }
    });
</script>

<fieldset>
    <legend>app3 处理用户事件</legend>
    <div id="app3">
        <p>{{message}}</p>
        <button v-on:click="reverseMsg">reversMsg</button>
    </div>
</fieldset>

<script>
    //处理用户事件
    new Vue({
        el: "#app3",
        data: {
            message: "use vue"
        },
        methods: {
            reverseMsg: function () {
                this.message = this.message.split("").reverse().join("");
            }
        }
    });
</script>

<fieldset>
    <legend>app4 综合</legend>
    <div id="app4">
        <input type="text" v-model="newTodo" placeholder="todo内容，回车添加" v-on:keyup.enter="addTodo">
        <ul>
            <li v-for="todo in todos"><span>{{todo.text}}</span>
                <button v-on:click="removeTodo($index)">X</button>
            </li>
        </ul>
    </div>

</fieldset>

<script>
    //综合
    new Vue({
        el: "#app4",
        data: {
            newTodo: "",
            todos: [{text: "learn vue"}, {text: "use vue"}]
        }
        , methods: {
            addTodo: function () {
                var text = this.newTodo.trim();
                if (text) {
                    this.todos.push({text: text});
                    this.newTodo = "";
                }
            }, removeTodo: function (index) {
                this.todos.splice(index, 1);
            }
        }
    });
</script>

</body>
</html>